<template>
    <div class="container">
        <Breadcrumb :items="['menu.list', '订单记录']" />
        <a-card class="general-card" title="订单记录">
            <a-row>
                <a-col>
                    <a-form :model="formData" label-align="auto" auto-label-width>
                        <a-row :gutter="16">
                            <a-col :span="8">
                                <a-form-item label="时间">
                                    <a-range-picker showTime :time-picker-props="{
                                        defaultValue: ['00:00:00', '00:00:00']
                                    }" v-model="rangeValue" @change="onChange" @select="onSelect"
                                        style=" width: 100%; " />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="客户名称">
                                    <a-input allow-clear v-model="formData.customerName" placeholder="请输入" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="商户订单号">
                                    <a-input allow-clear v-model="formData.orderId" placeholder="请输入" />
                                </a-form-item>
                            </a-col>
                            <!-- <a-col :span="6">
                                <a-form-item label="学生学号">
                                    <a-input allow-clear v-model="formData.userAccount" placeholder="请输入" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="生产厂家">
                                    <a-input allow-clear v-model="formData.manufacturer" placeholder="请输入" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="终端编号">
                                    <a-input allow-clear v-model="formData.imei" placeholder="请输入" />
                                </a-form-item>
                            </a-col> -->
                            <a-col :span="4">
                                <div class="search-btn">
                                    <a-button type="primary" @click="onPageChange(1)">查询</a-button>
                                    <a-button type="primary" status="success"
                                        @click="getRecordsExport(formData)">导出</a-button>
                                </div>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-col>
            </a-row>
        </a-card>

        <div class="container-table">
            <a-card class="general-card">
                <!-- :scroll="{ x: 270 }" -->
                <a-table :virtual-list-props="{ height: 460 }" :scroll="{ x: '120%', y: '100%' }" :loading="loadingEdit"
                    :columns="columns" :data="tableList" :pagination="pagination" @page-change="onPageChange"
                    @page-size-change="pagesizechange">
                    <template #cjmc="{ record }">
                     自助售卖机
                    </template>
                    <template #operations="{ record }">
                        <a-button type="text" size="small"  @click="showDetail(record)">
                            详情
                        </a-button>
                        <!-- <a-popconfirm content="确认是否退款?" type="warning" @ok="getpaymentbyBusinessOrderNo(record)">
                            <a-button type="text" size="small">
                                退款
                            </a-button>
                        </a-popconfirm> -->
                    </template>
                </a-table>
            </a-card>
        </div>


        <a-modal v-model:visible="showDetailModal" title="订单详情" width="600px" @ok="showDetailModal = false"
            @cancel="showDetailModal = false">
            <a-form :model="currentRecord" label-align="right" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                <a-row :gutter="16">
                    <a-col :span="24">
                        <a-form-item label="商户订单号">
                            {{ currentRecord.orderId }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="租户简称">
                            {{ currentRecord.customerName }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="机器位置">
                            {{ currentRecord.nodeName }}
                        </a-form-item>
                    </a-col>
                     <a-col :span="24">
                        <a-form-item label="场景名称">
                            自助售卖机
                        </a-form-item>
                    </a-col>
                      <a-col :span="24">
                        <a-form-item label="机型">
                            {{ currentRecord.vmTypeName }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="商品名称">
                            {{ currentRecord.productName }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="订单金额(元)">
                            {{ currentRecord.retailPrice }}
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24">
                        <a-form-item label="支付渠道">
                            {{ currentRecord.payTypeName }}
                        </a-form-item>
                    </a-col> -->
                    <a-col :span="24">
                        <a-form-item label="下单时间">
                            {{ currentRecord.cts }}
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24">
                        <a-form-item label="订单状态">
                            <a-tag v-if="currentRecord.orderStatus === 'SUCCESS'" color="green">
                                支付成功
                            </a-tag>
                            <a-tag v-else-if="currentRecord.orderStatus === 'CANCELLED'" color="gray">
                                已退款
                            </a-tag>
                            <a-tag v-else color="yellow">
                                {{ currentRecord.orderStatus }}
                            </a-tag>
                        </a-form-item>
                    </a-col> -->
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { Message, Modal } from '@arco-design/web-vue';

import { baseUrl } from "@/api/interceptor"


import { thirdsyncorders, recordsstats, recordsexport, paymentbyBusinessOrderNo } from '@/api/hairdryer'

import moment from 'moment';



let loadingEdit = ref(false);
// 详情弹窗相关变量
let showDetailModal = ref(false);
let currentRecord = ref({});
//查询列表
let formData = ref({
    page: 1,
    size: 10,
    stime: moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    etime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')
})
const pagination = ref({
    current: formData.value.page,
    pageSize: formData.value.size,
    showTotal: true,
    showJumper: true,
    "show-page-size": true,
    total: 0
}); // 分页属性
const columns = ref([
    {
        title: '商户订单号',
        width: '100',
        dataIndex: 'orderId',
    },
    {
        title: '客户名称',
        width: '120',
        dataIndex: 'customerName',

    },
    {
        title: '场景名称',
        width: '120',
        dataIndex: 'cjmc',
        slotName: 'cjmc',
    },
    {
        title: '机器位置',
        width: '200',
        dataIndex: 'nodeName',
    },
      {
        title: '机型',
        width: '100',
        dataIndex: 'vmTypeName',
    },
    {
        title: '商品名称',
        width: '160',
        dataIndex: 'productName',
    },
   
    {
        title: '标签价',
        width: '100',
        dataIndex: 'retailPrice',
    },
     {
        title: '成本',
        width: '100',
        dataIndex: 'cost',
    },
     {
        title: '手续费',
        width: '100',
        dataIndex: 'commission',
    },
     {
        title: '订单金额',
        width: '100',
        dataIndex: 'netProfit',
    },
    // {
    //     title: '支付方式',
    //     width: '100',
    //     dataIndex: 'payTypeName',
    // },
    {
        title: '下单时间',
        width: '150',
        dataIndex: 'cts',
    },
    {
        title: '操作',
        width: '100',
        align: 'left',
        fixed: 'right',
        dataIndex: 'operations',
        slotName: 'operations',
    },

])

//时间选择器
let rangeValue = ref([moment().startOf('month').valueOf(), moment().endOf('month').valueOf()])
const onSelect = (dateString, date) => {
    console.log('onSelect: ', dateString, date);
}
const onChange = (dateString, date) => {
    console.log('onChange: ', dateString, date);

    if (dateString) {
        // let one = dateString[0].split(" ")[0]
        let one = dateString[0]
        let two = dateString[1]

        formData.value.stime = one;
        formData.value.etime = two;

    } else {
        formData.value.stime = '';
        formData.value.etime = '';

    }


}

const tableList = ref([]);

const onPageChange = (current) => {
    formData.value.page = current;
    pagination.value.current = current;
    getendbackfindAll()
};

const pagesizechange = (pageSize) => {
    formData.value.page = 1;
    pagination.value.current = 1;

    formData.value.size = pageSize;
    pagination.value.pageSize = pageSize;
    getendbackfindAll()


}


let getendbackfindAll = async () => {
    loadingEdit.value = true;

    try {
        tableList.value = []
        let res = await thirdsyncorders(formData.value)
        console.log(res, 'dddd');


        tableList.value = res.data.content

        pagination.value.total = res.data.totalElements;
        loadingEdit.value = false;


    } catch (err) {
        loadingEdit.value = false;

    }
}


// 显示详情弹窗
const showDetail = (record) => {
    // 深拷贝记录数据到当前记录变量
    currentRecord.value = JSON.parse(JSON.stringify(record));
    // 显示弹窗
    showDetailModal.value = true;
}



//退款
const getpaymentbyBusinessOrderNo = async (data) => {
    return
    try {
        loadingEdit.value = true;

        let res = await paymentbyBusinessOrderNo({ businessOrderNo: data.businessOrderNo })
        Message.success('退款成功');

        getendbackfindAll()

    } catch (error) {
        loadingEdit.value = false;
        console.log(error);

    }
}


//导出
const getRecordsExport = async (formData) => {

    loadingEdit.value = true;

    // 3. 合并参数（手动过滤掉 null/undefined）
    const params = {};
    Object.keys(formData).forEach((key) => {
        if (formData[key] != null) { // 跳过 null 和 undefined
            params[key] = formData[key];
        }
    });

    // 4. 使用 URLSearchParams 序列化
    const searchParams = new URLSearchParams();
    Object.entries(params).forEach(([key, value]) => {
        searchParams.append(key, value);
    });

    // 5. 拼接 URL 并打开新窗口
    window.open(`${baseUrl}/api/thirdsync/orders/export?${searchParams.toString()}`, '_blank');

    loadingEdit.value = false;

};


onMounted(() => {
    getendbackfindAll()
})

</script>
<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;

    .search-btn {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0 10px;
    }


    .container-table {
        margin-top: 20px;

        .general-card {
            box-sizing: border-box;
            padding: 20px 0;


        }
    }
}

.form-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;

    .label {
        font-size: 18px;
        font-weight: bold;
    }

    .content {
        font-size: 16px;

    }
}
</style>
